<!--<template>-->
<!--	&lt;!&ndash; :pagination="false" 取消分页 &ndash;&gt;-->
<!--	<Table filter  v-bind="tableOpts" v-on="tableEvent">-->
<!--		<template #operator>-->
<!--			<div class="operator-wrap">-->
<!--				<modifyAccount ref="dialogRef" @change="fetchCurrentTable" />-->
<!--			</div>-->
<!--		</template>-->
<!--	</Table>-->
<!--</template>-->

<!--<script>-->
<!--import modifyAccount from "./components/modifyAccount.vue";-->
<!--import tableMixins from "@/mixins/tableMixins.vue";-->
<!--export default {-->
<!--	name: "AccountManage",-->
<!--	mixins: [tableMixins],-->
<!--	components: {-->
<!--		modifyAccount,-->
<!--	},-->
<!--	data () {-->
<!--		return {-->
<!--			// apiName: "getAccount",-->
<!--			apiName:'userUserList',-->
<!--			form: {-->
<!--				username: {-->
<!--					tag: "el-input",-->
<!--					label: "姓名",-->
<!--					value: "",-->
<!--					props: {-->
<!--						clearable: true,-->
<!--						placeholder: "请输入人员姓名",-->
<!--					},-->
<!--				},-->
<!--				mobile: {-->
<!--					tag: "el-input",-->
<!--					label: "手机号码",-->
<!--					value: "",-->
<!--					props: {-->
<!--						clearable: true,-->
<!--						placeholder: "请输入手机号码",-->
<!--					},-->
<!--				},-->
<!--			},-->
<!--		};-->
<!--	},-->
<!--	methods: {-->
<!--		handleAction (opts, row) {-->
<!--			const { username: name, id } = row;-->
<!--			if (["edit", "editPsd"].includes(opts)) this.showDialog(opts, row);-->
<!--			else if (opts === "delete")-->
<!--				this.showConfirm(`确认删除【${name}】？`, "deleteAccount", { id });-->
<!--		},-->
<!--	},-->
<!--};-->
<!--</script>-->

<!--<style lang="less" scoped></style>-->


<template>
  <div class="page">
    <div class="topSearch">
      <span> 姓名：</span>
      <el-input v-model="params.userName" size="small" placeholder="请输入人员姓名" style="width: 250px"></el-input>
      <el-button size="small" type="primary" @click="getList" style="margin-left: 20px">查询</el-button>
      <el-button size="small">重置</el-button>
    </div>
    <div class="centerCount" style="margin-top: 20px">
      <el-button type="primary" size="small" style="margin-bottom: 10px" @click="addUser">新增</el-button>
      <el-table :data="userInfoData" border height="calc(100vh - 250px)"
        :cellStyle="{ textAlign: 'center', 'font-size': '12px' }" v-loading='loading' element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading" :headerCellStyle="{
        'textAlign': 'center',
        'fontWeight': 400,
        'background': '#66b1ff',
        'color': 'white',
      }">
        <el-table-column prop="id" label="ID" width="120px" />
        <el-table-column prop="userName" label="用户名" />
        <el-table-column prop="mobile" label="手机号码" />
        <el-table-column label="角色名称">
          <template slot-scope="scope">
            {{ scope.row.role.name }}
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" />
        <el-table-column prop="updatedAt" label="修改时间" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link type="primary" @click="editUser(scope.row)">编辑</el-link>
            <el-link type="danger" style="margin-left: 30px" @click="deleteUser(scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="margin-top: 20px" align="right" @size-change="handleFinanceSizeChange"
        @current-change="handleFinanceCurrentChange" :current-page="currentPage" :page-sizes="[20, 30, 40, 50]"
        layout="total, sizes, prev, pager, next, jumper" :total="count">
      </el-pagination>
    </div>
    <div class="dialogBar">
      <el-dialog :visible.sync="uerDialog" width="40%">
        <div style="display: flex;align-items: center;margin-bottom: 30px;">
          <div style="width:120px;text-align: center;"><span style="color:red;">*</span>姓名：</div>
          <el-input size="small" v-model="addForm.userName" style="width:500px"></el-input>
        </div>
        <div style="display: flex;align-items: center;margin-bottom: 30px;">
          <div style="width:120px;text-align: center;"><span style="color:red;">*</span>手机号码：</div>
          <el-input size="small" v-model="addForm.mobile" style="width:500px"></el-input>
        </div>
        <div style="display: flex;align-items: center;margin-bottom: 30px;">
          <div style="width:120px;text-align: center;"><span style="color:red;">*</span>角色：</div>
          <el-select :disabled="type == 2" clearable v-model="addForm.roleId" size='small' style="width:500px"
            placeholder="请选择">
            <el-option v-for="item in userData" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <!-- <div style="display: flex;align-items: center;margin-bottom: 30px;">
          <div style="width:120px;text-align: center;"><span style="color:red;">*</span>区域：</div>
          <el-select clearable v-model="addForm.area" size='small'
                     style="width:500px" placeholder="请选择">
            <el-option v-for="item in areaData" :key="item.area" :label="item.areaName" :value="item.area">
            </el-option>
          </el-select>
        </div> -->
        <div style="display: flex;align-items: center;margin-bottom: 30px;">
          <div style="width:120px;text-align: center;"><span style="color:red;">*</span>密码：</div>
          <el-input size="small" v-model="addForm.password" type="password" show-password
            style="width:500px"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="uerDialog = false">取 消</el-button>
          <el-button type="primary" @click="addInfo">确 定</el-button>
        </span>
      </el-dialog>


    </div>
  </div>


</template>
<script>
import dayjs from 'dayjs';

export default {
  data() {
    return {
      currentPage: 1,
      count: 0,
      params: {
        pageNumber: 1,
        pageSize: 20,
        userName: "",
      },
      userInfoData: [],
      loading: false,
      uerDialog: false,
      userData: [],
      areaData: [],
      addForm: {},
      type: ""
    }
  },
  created() {
    this.getList()
    const params = {
      pageSize: 10000
    }
    window.$api.getRole(params).then(res => {
      this.userData = res.data
    })
    this.$api.areaLedgerAreaList(params).then(res => {
      this.areaData = res
    })

  },
  methods: {
    getList() {
      const params = this.params
      this.$api.userUserList(params).then(res => {
        res.data.forEach(el => {
          el.createdAt = dayjs(el.createdAt).format("YYYY-MM-DD HH:mm:ss")
          el.updatedAt = dayjs(el.updatedAt).format("YYYY-MM-DD HH:mm:ss")
        })
        this.userInfoData = res.data
        this.count = res.total
      })
    },
    addUser() {
      this.type = 1
      this.uerDialog = true
      this.addForm = this.$options.data.call(this).addForm
    },
    addInfo() {
      const data = this.addForm
      var re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
      var result = re.test(data.mobile);
      if (!result) {
        alert("手机号码格式不正确！");
        return false;
      }
      if (this.type === 1) {
        this.$api.userAddUser(data).then(res => {
          this.$message({ message: "操作成功！", type: 'success' })
        })
      } else if (this.type === 2) {
        this.$api.userUserInfoUpdate(data).then(res => {
          this.$message({ message: "操作成功！", type: 'success' })
        })
      }

      this.uerDialog = false
      this.getList();
    },
    editUser(row) {
      this.type = 2
      this.uerDialog = true
      this.addForm = row
      this.addForm.roleId = row.roleId
    },
    deleteUser(row) {
      const data = {
        id: row.id
      }
      this.$confirm('确认删除' + row.userName + "的数据项？")
        .then(res => {
          this.$api.userDeleteUser(data).then(res => {
            setTimeout(() => {
              this.$message({
                type: 'success',
                message: "删除成功！"
              }),
                this.getList();
            }, 2000)
          }
          )
        })
        .catch(_ => {
          return
        });
    },
    handleFinanceSizeChange(e) {
      this.params.pageSize = e
      this.getList()
    },
    handleFinanceCurrentChange(e) {
      this.params.pageNumber = e
      this.getList()
    }
  }
}

</script>

<style lang="less" scoped>
.topSearch {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
</style>
